<template>
	<view class="cu-list menu-avatar comment">
		<view class="cu-item lg">
			<view class="cu-avatar round" :style="'background-image:url(' + comment.sHeadimgurl + ');'" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);">
			</view>
			<view class="content">
				<!-- user -->
				<view class="text-gray text-sm">{{ comment.sNickName }}</view>
				<!-- time -->
				<view class="text-gray text-sm">{{ comment.create_time | formatDate }}</view>
				<!-- content -->
				<view class="text-black text-content text-df">
					{{ comment.sContent }}
				</view>
				<view class="bg-gray padding-sm margin-top-sm radius text-sm" v-for="(reply, index) in comment.reply" :key="index">
					<view class="flex">
						<view class="padding-right-xs">
							<text class="text-grey">{{ reply.sNickName }}</text>:回复
						</view>
						<view class="flex-sub">
							{{ reply.sContent }}
						</view>
					</view>
				</view>
				<view class="flex justify-end margin-top-xs">
					<view>
						<text class="cuIcon-community lg text-gray margin-left-sm" @click="handleReply()"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatDate
	} from '@/common/util.js';

	export default {
		name: "app-article-comment",
		data() {
			return {
				showModal: false
			};
		},
		filters: {
			formatDate: (value) => {
				return formatDate(value, 'YYYY-MM-DD');
			}
		},
		props: {
			comment: {
				type: [Object],
				default: {}
			}
		},
		methods: {
			handleReply() {
				this.$emit('replyComment', this.comment);
			}
		}
	}
</script>

<style>

</style>
